<template>
  <div>
    <p>
      目标对象：已选 <span>{{ selectKeys.length }}</span> 条
    </p>
    <a-button type="primary" @click="onAdd()" v-if="category != 4"> 新建目标 </a-button>
    <a-button @click="onInport()" v-if="category != 4" style="margin-left: 20px"> 批量导入 </a-button>
    <a-button @click="deleteSelect()" v-if="category != 4" :disabled="isDisabled" style="margin: 0 0 20px 20px">
      删除
    </a-button>
    <CustomTable
      ref="table"
      :showAlert="false"
      :columns="columns"
      :dataSource="pageData"
      :showSelection="isSelection"
      rowKey="id"
      @selectedRow="onSelectedRow"
      @change="onTableChange"
    >
      <template slot="order" slot-scope="text, record, index">
        {{ index + 1 }}
      </template>
      <template slot="taskName" slot-scope="text, record">
        <!-- {{ getIndex(index) }} -->
        {{ record.id }}
        <a-input v-if="isEditShow(record.id)" v-model="pageData.records[record.id].taskName" placeholder="请输入" />
        <span v-else>{{ pageData.records[record.id].taskName }}</span>
      </template>
      <template slot="action" slot-scope="text, record">
        <a-space size="large">
          <!-- {{ getIndex(index) }} -->
          {{ record.id }}
          <a v-if="isEditShow(record.id)" @click="onConfirm(record.id)">保存</a>
          <a v-else @click="onEdit(record.id)">编辑</a>
          <a-popconfirm title="是否要删除记录吗?" ok-text="是" cancel-text="否" @confirm="onDelete(record.id)">
            <a>删除</a>
          </a-popconfirm>
        </a-space>
      </template>
    </CustomTable>
    <ImportModal ref="importModalId" />
  </div>
</template>

<script>
import CustomTable from '@/components/zxd/Table/CustomTable'
import ImportModal from './ImportModal'
export default {
  components: { CustomTable, ImportModal },
  data() {
    return {
      pageData: {
        records: [],
        pages: 1,
        size: 5,
        current: 1,
      },
      columns: [],
      columns2: [
        {
          title: '走私物品名称',
          dataIndex: 'taskName',
          align: 'center',
          scopedSlots: { customRender: 'taskName' },
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
          width: 200,
        },
      ],
      columns3: [
        {
          title: '账户名',
          dataIndex: 'taskName',
          align: 'center',
          scopedSlots: { customRender: 'taskName' },
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
          width: 200,
        },
      ],
      columns4: [
        {
          title: '监测网站',
          dataIndex: 'taskName',
          align: 'center',
          scopedSlots: { customRender: 'taskName' },
        },
      ],
      form: {},
      isEdit: [],
      type: 1, //默认第一个，网站告警
      selectKeys: [],
      isSelection: true,
      category: this.$route.query.category,
      isDisabled: true,
    }
  },

  created() {
    this.setType(this.category)
  },
  mounted() {},
  computed: {
    pageLength() {
      return parseInt((this.pageData.records.length - 1) / this.pageData.size) + 1
    },
  },
  methods: {
    setType(type) {
      this.isEdit = []
      this.type = type
      this.pageData = {
        records: [
          // {
          //   taskName: 'https://www.taobao.com/',
          // },
          // {
          //   taskName: 'https://www.weibo.com/',
          // },
          // {
          //   taskName: 'https://www.goofish.com/',
          // },
          // {
          //   taskName: 'https://tieba.baidu.com/',
          // },
          // {
          //   taskName: 'https://www.taobao.com/',
          // },
          // {
          //   taskName: 'https://www.weibo.com/',
          // },
          // {
          //   taskName: 'https://www.goofish.com/',
          // },
          // {
          //   taskName: 'https://tieba.baidu.com/',
          // },
        ],
        pages: 1,
        size: 5,
        current: 1,
      }
      this.isSelection = true
      //物品告警
      if (type == 2) {
        this.columns = this.columns2
      }
      //账号告警
      if (type == 3) {
        this.columns = this.columns3
      }
      //网站告警
      if (type == 4) {
        this.isSelection = false
        this.columns = this.columns4
        this.pageData = {
          records: [
            {
              taskName: 'https://www.taobao.com/',
            },
            {
              taskName: 'https://www.weibo.com/',
            },
            {
              taskName: 'https://www.goofish.com/',
            },
            {
              taskName: 'https://tieba.baidu.com/',
            },
          ],
          pages: 1,
          size: 5,
          current: 1,
        }
      }
    },
    onSelectedRow(keys) {
      this.selectKeys = keys
      //设置父组件的删除按钮状态
      this.isDisabled = keys.length > 0 ? false : true
    },
    getRecordLength() {
      if (this.type == 4) {
        //第4项没有人为操作产生的记录
        return 0
      } else {
        return this.pageData.records.length
      }
    },
    onClearRowKeys() {
      this.$refs.table.onClearRowKeys()
    },
    getIndex(index) {
      return (this.pageData.current - 1) * this.pageData.size + index
    },
    onAdd() {
      //插入第一个,页面跳到第一页
      this.pageData.records.unshift({ taskName: '' })
      this.isEdit.unshift({ isEdit: true })
      //每添加一个元素，遍历数组从0开始添加id属性，此id用于追踪元素做编辑和删除功能
      this.pageData.records.forEach((item, index) => {
        item.id = index
      })
      this.isEdit.forEach((item, index) => {
        item.id = index
      })
      this.refreshTable(1)
      console.log(this.isEdit)
      //插入最后一个,页面跳到第后一页
      // this.pageData.records.push({ taskName: '' })
      // this.isEdit.push(true)
      // this.refreshTable(this.pageLength)
    },
    onInport() {
      this.$refs.importModalId.add()
    },
    async refreshTable(current) {
      let length = this.pageData.records.length
      this.pageData.pages = this.pageLength
      this.pageData.current = current
      this.pageData.total = length

      // let res = await api.getPageList(this.pageFilter)
      // if (res.data != null) {
      //   this.pageData = res.data
      // }
    },
    onEdit(id) {
      let index = this.pageData.records.findIndex((item) => item.id === id)
      console.log(index)
      this.$set(this.isEdit[index].isEdit, index, true)
    },
    isEditShow(id){
      // let index = this.pageData.records.findIndex((item) => item.id === id)
      // console.log(index)
      // this.$set(this.isEdit[index].isEdit, index, true)
      return true
    },
    onDelete(id) {
      //删除数组中匹配id的属性的元素
      let index = this.pageData.records.findIndex((item) => item.id === id)
      console.log(index)
      this.pageData.records.splice(index, 1)
      this.isEdit.splice(index, 1)

      // console.log(this.pageData.records)
      // console.log(this.isEdit)
      // this.pageData.records.splice(index, 1)
      // this.isEdit.splice(index, 1)
      // this.refreshTable(1)
    },
    //删除所选
    deleteSelect() {
      console.log(this.selectKeys)
      // let arr = this.$refs.table.getSelectedRowKeys()
      let that = this
      this.$confirm({
        title: `确定要删除吗?`,
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          that.selectKeys.forEach((item) => {
            that.pageData.records.splice(index, 1)
            that.isEdit.splice(index, 1)
          })
        },
      })
    },
    onConfirm(id) {
      let index = this.pageData.records.findIndex((item) => item.id === id)
      if (this.pageData.records[index].taskName == '') {
        this.$message.warning('值不能为空！')
        return
      }
      this.$set(this.isEdit[index].isEdit, index, true)
      // this.$set(this.isEdit, index, false)
    },
    onTableChange(pageFilter, filters, sorter) {
      this.refreshTable(pageFilter.currentPage)
    },
    getData() {
      return this.pageData.records
    },
    setData(arr) {
      this.pageData.records = arr
    },
  },
}
</script>
<style lang="less" scoped>
/deep/.ant-pagination-options-size-changer.ant-select {
  display: none;
}
</style>
